;(function () {
	let myChart = echarts.init(document.querySelector('.box-m3'))

	let option = {
		color: ['#FF0087', '#FFBF00'], // 上方中间小标题颜色
		title: {
			text: '标题样式'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: 'red'
				}
			}
		},
		legend: {
			data: ['销售额', '利润']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '销售额',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(128, 255, 165)'
						},
						{
							offset: 1,
							color: 'rgb(1, 191, 236)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [520, 330, 160, 120, 320, 480, 860]
			},
			{
				name: '利润',
				type: 'line',
				stack: 'Total',
				smooth: true,
				lineStyle: {
					width: 0
				},
				showSymbol: false,
				label: {
					show: true,
					position: 'top'
				},
				areaStyle: {
					opacity: 0.8,
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: 'rgb(255, 191, 0)'
						},
						{
							offset: 1,
							color: 'rgb(224, 62, 76)'
						}
					])
				},
				emphasis: {
					focus: 'series'
				},
				data: [180, 560, 240, 80, 360, 210, 460]
			}
		]
	}

	myChart.setOption(option)
	window.addEventListener('resize', () => {
		myChart.resize()
	})
})()
